<!--********************************************************************
* Copyright© 2000 - 2020 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title data-i18n='resources.title_componentsMap_React'></title>
  <script type="text/javascript" include="react" src="../js/include-web.js"></script>
  <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #main {
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="main">

  </div>
  <script type="text/babel">
    // import {WebMap} from '@supermap/react-iclient'
    var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
    var attribution =
      "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
      " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
      " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
    var SmWebMap = SuperMap.Components.SmWebMap;
    var mapOptions = {
      container: 'map',
      style: {
        version: 8,
        sources: {
          'raster-tiles': {
            attribution: attribution,
            type: 'raster',
            tiles: [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
            tileSize: 256
          }
        },
        layers: [
          {
            id: 'simple-tiles',
            type: 'raster',
            source: 'raster-tiles',
            minzoom: 0,
            maxzoom: 22
          }
        ]
      },
      center: [120.143, 30.236],
      zoom: 3
    };
    ReactDOM.render(<SmWebMap mapOptions={mapOptions} />, document.getElementById('main'));
  </script>
</body>

</html>
